<template>
  <div class="projectSummarize-warp">
    <div class="projectSummarize">
      <div class="projectSummarize-title">
        <text>{{Summary.TName}}</text>
      </div>
      <div class="organization">
        <text>机构:&ensp;{{Summary.OrgName}}</text>
      </div>
      <!--<div class="input-content">-->
        <!--<input placeholder="请输入总结内容..." :disabled='Summary.Status==2?true:false' v-model="Summary.Summary" v-html="Summary.Summary"></input>-->

      <!--</div>-->
        <!--read-only="Summary.Status==2?true:false"-->

        <editor
            id="editor"
            class="input-content"
            placeholder="请输入总结内容..."
            showImgSize
            showImgToolbar
            showImgResize
            :readOnly="!inAddStage"
            @input="onChange($event)">
        </editor>
    </div>
    <div class="projectSummarize-pageButtom" v-if="inAddStage">
      <div class="handbook" @click="preserve">保存</div>
      <div class="project-details" @click="submit">提交</div>
    </div>
    <van-toast id="van-toast" />
  </div>
</template>

<script>
  import {
    TrainingAddEditSummary,
    TrainingSummaryDetail
  } from '@/providers/service'
  export default {
    data() {
      return {
        Summary: '',
        TID: '',
        UserID: '',
        inAddStage:false
      }
    },
    onShow() {
      this.TrainingSummaryDetailFn()
    },
    methods: {
        reInitEditor(){
            console.log('init')
            let query = wx.createSelectorQuery().select('#editor').context(res =>{
                res.context.setContents({
                    html:this.Summary.Summary
                })
            }).exec()
        },
        onChange(event){
            this.Summary.Summary = event.mp.detail.html
        },
      TrainingSummaryDetailFn() {
        let userInfo = wx.getStorageSync('userInfo')
        let {
          TID
        } = this.$route.query;
        this.UserID = userInfo.UserID
        this.TID = TID
        TrainingSummaryDetail({
          TID,
          UserID: userInfo.UserID
        }).then((res) => {
          this.Summary = res
            //赋值
          this.reInitEditor()
          // 判断状态
          if(res.ID === 0){
              this.inAddStage = true
            }else{
                if(res.Status === 2){
                    this.inAddStage = false
                }else{
                    this.inAddStage = true
                }
            }
        })
      },
      TrainingAddEditSummaryFn(Status) {
        TrainingAddEditSummary({
          TID: this.TID,
          UserID: this.UserID,
          Status: Status,
          Summary: this.Summary.Summary
        }).then((res) => {
            if(!res){
                if(Status ===1){
                    this.$toast('保存成功')
                }else{
                    this.$toast('提交成功')
                    setTimeout(() => {
                        this.$router.go(-1)
                    }, 1000)
                }
                }
            }
       )
      },
      preserve() {
        if (!this.Summary.Summary) {
          this.$toast('您尚未填写课堂总结')
          return false
        }
        let Status = 1
        this.TrainingAddEditSummaryFn(Status)
      },
      submit() {
        if (!this.Summary.Summary) {
          this.$toast('您尚未填写课堂总结')
          return false
        }
        let Status = 2
        this.TrainingAddEditSummaryFn(Status)
      }
    }
  };
</script>

<style lang="less" scoped>
  .projectSummarize-warp {
    .projectSummarize {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 150rpx;
      background: #f1f1f1;
      .projectSummarize-title {
        width: 100%;
        height: 114rpx;
        border-bottom: 1rpx solid #dddddd;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        text {
          max-width: 670rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 44rpx;
          color: #000000;
        }
      }
      .organization {
        width: 100%;
        height: 58rpx;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        text {
          max-width: 670rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 24rpx;
          color: #666666;
        }
      }
      .input-content {
        width: 100%;
        height: 850rpx;
        display: flex;
        justify-content: center;
        margin-top: 22rpx;
        textarea {
          height: 744rpx;
          width: 678rpx;
          border: 1px solid #dddddd;
          font-size: 24rpx;
          color: #979797;
          padding: 22rpx;
        }
      }
    }
    .projectSummarize-pageButtom {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 84rpx;
      background: green;
      display: flex;
      div {
        flex: 1;
      }
      .handbook {
        background: #1da081;
        font-size: 36rpx;
        color: #ffffff;
        text-align: center;
        line-height: 84rpx;
      }
      .project-details {
        background: #ffab3b;
        font-size: 36rpx;
        color: #ffffff;
        text-align: center;
        line-height: 84rpx;
      }
    }
  }
</style>


